<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>法援宝</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/lawyer.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/lawyer.js"></script>

    <style>
        html,body{height: 100%;}
        .fixed{display: none;position: fixed;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);z-index: 999;}
        .fixed .content{position: absolute;left: 0;right: 0;top: -4rem;bottom: 0;margin: auto;opacity: 1;width: 80%;height: 6rem;background: #ffffff;border-radius: 4px; overflow: hidden;}
        .content .title{display: flex; justify-content: space-between;}
        .content .title h6{width: 100%;height: 0.99rem;line-height: 0.99rem;text-align: center;font-size: 0.32rem;font-weight: normal;border-bottom: 0.01rem #f3f3f3 solid;}

        .choose{display: flex;justify-content: space-between;font-size: 0.26rem;}
        .choose ul{width: 35%;height: 5rem;overflow-y: scroll;}
        .choose ul li,.choose ol li span{height: 0.99rem;border-bottom: 0.01rem #f3f3f3 solid;display: flex;justify-content: center;align-items: center;}
        .choose ul li.active{color: #fd8e32;}
        .choose ol{width: 65%;height: 5rem;list-style: none;background: #f3f3f3;overflow-y: scroll;}
        .choose ol li span{border-bottom: 0.01rem #e1e1e1 solid;}
        .choose ol li span input[type=checkbox]{display: none;}
        .choose ol li span.on{ color: #fd8e32;}
        .error{color:red;}
    </style>
</head>
<body>
<div id="secHeader">
  <header class="header">
      <a href="javascript:void(0);" onclick="comeBack()" class="back_btn"><img src="../image/head-fanhui.png" alt=""></a>
      <h2>个人资料</h2>
      <a href="javascript:;" class="tel_btn" onclick="tijiao()">保存</a>
  </header>
</div>
<section class="userInfo_list"  style="margin-bottom: 0!important;">
    <ul>
        <li class=>
            <div class="info_item">
                <p>修改头像</p>
                <div class="tx_upload">
                    <img src="../image/user_tx.png" alt=""  onclick="showAction('icon')" id='icon'>
                    <input type="hidden" name='icon' value=''>
                </div>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>姓名</p>
                <input type="text" placeholder="请输入真实姓名" name='nickname'>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>性别</p>
                <input type="text" placeholder="请选择性别" readonly name='sex'>
                <select name="" id="">
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p id="addressTit">地区</p>

                <input type="text" placeholder="请选择地区" name='addr' readonly  class="kinds_choose">
                <input type="hidden"  name='addrid' >
            </div>
        </li>
        <li>
            <div class="info_item">
                <p id="zcTit">专长类型</p>
                <a href="javascript:void(0);" class="check_kinds">请选择专长类型</a>
                 <input type="hidden"  name='label' value="">
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>执业年限</p>
                <input type="text" placeholder="请输入年限数字如：1、2"  name='work_year'>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>律所</p>
                <input type="text" placeholder="请输入律所名称"  name='depart'>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>执业证号</p>
                <input type="text" placeholder="请输入执业证号"  name='ipno'>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>身份证号</p>
                <input type="text" placeholder="请输入身份证号" name='icno'>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>简介</p>
                <input type="text" placeholder="请输入个人简介" name='content'>
            </div>
        </li>
       <!--  <li>
           <div class="info_item">
               <p>手机号</p>
               <input type="text" placeholder="请输入手机号" >
           </div>
       </li> -->
        <li>
            <div class="info_item">
            <p>绑定银行卡</p>

            <a href="javascript:;" onclick="aaplay('personal_info_bankCard')" id='cardno'>绑定银行卡号</a>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p>支付宝</p>
                <input type="text" placeholder="请输入支付宝账号" name='zfb'>
            </div>
        </li>
        <li style="border-bottom:none!important;">
            <div class="info_item">
                <p id="zjImgTit">上传执业证照片</p>
            </div>
            <div class="photos">
                <dl>
                    <dd><img src="../image/user_upload1.png" alt="" onclick="showAction('n1')" id='n1'></dd>
                    <dd><img src="../image/user_upload2.png" alt="" onclick="showAction('n2')" id='n2'></dd>
                    <input type="hidden" name='n1' value=''>
                    <input type="hidden" name='n2' value=''>
                </dl>
            </div>
        </li>
        <li>
            <div class="info_item">
                <p id="idcardTit">上传身份证照片</p>
            </div>
            <div class="photos">
                <dl>
                    <dd><img src="../image/user_upload3.png" alt="" onclick="showAction('n3')"  id='n3'></dd>
                    <dd><img src="../image/user_upload4.png" alt="" onclick="showAction('n4')"  id='n4'></dd>
                    <input type="hidden" name='n3' value='' >
                    <input type="hidden" name='n4' value='' >
                </dl>
            </div>
        </li>
    </ul>
</section>

<section class="fixed_checked">
    <div class="checked_section">
        <div class="fixed_title">
            <h6>请选择类型</h6>
            <a href="javascript:void(0);" class="sure_btn">确定</a>
        </div>
        <div class="kinds_section">
            <div class="check_box">
                <ul id='f'>

                </ul>
            </div>
            <div class="kinds_item" id='son'>
                <ul>
                    <li>一般民事</li>

                </ul>
                <ul>2</ul>
                <ul>3</ul>
                <ul>4</ul>
                <ul>5</ul>
                <ul>6</ul>
                <ul>7</ul>
            </div>
        </div>

    </div>
</section>
<div class="fixed">
    <div class="content">
        <div class="title">
            <h6>请选择地区</h6>

        </div>
        <div class="choose">
            <ul id="cityf">

            </ul>
            <ol id="citys">
                <li>

                </li>
                <li>

                </li>
                <li>

                </li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
            </ol>
        </div>
    </div>
</div>


</body>
<!-- <script type="text/javascript" src="../sjld/picker.min.js"></script>
<script type="text/javascript" src="../sjld/city.js"></script>
<script type="text/javascript" src="../sjld/index.js"></script> -->
<script>



    var pass = 0;
    apiready = function () {
      $api.fixStatusBar( $api.dom('#secHeader') );
      api.setStatusBarStyle({
          style: 'light'
      });

        api.showProgress();


        if(token!=''){
            user()
        }


    }
    function user(){
        var p={token:token,infock:2};
        api.ajax({
            url: webSiteUrl+'/app/user/user',
            method: 'post',
            data: {
                values:p
            }
        }, function(ret, err) {
          console.log(JSON.stringify(ret))
            api.hideProgress();
            if(ret.code==200){
                //alert(JSON.stringify(ret.data));
                pass = ret.data.pass;
                if(ret.data.icon.indexOf('http')==0){
                    $('#icon').attr('src',ret.data.icon); //用户头像
                }else{
                    $('#icon').attr('src',webSiteUrl+ret.data.icon); //用户头像
                }
                $("input[name=icon]").val(ret.data.iconid);
                if(ret.data.n1id >0){
                    $('#n1').attr("src",webSiteUrl+ret.data.ipzm);
                    $("input[name=n1]").val(ret.data.n1id);
                }
                if(ret.data.n2id >0){
                    $('#n2').attr("src",webSiteUrl+ret.data.ipfm);
                    $("input[name=n2]").val(ret.data.n2id);
                }
                if(ret.data.n3id >0){
                    $('#n3').attr("src",webSiteUrl+ret.data.iczm);
                    $("input[name=n3]").val(ret.data.n3id);
                }
                if(ret.data.n4id >0){
                    $('#n4').attr("src",webSiteUrl+ret.data.icfm);
                    $("input[name=n4]").val(ret.data.n4id);
                }


                $("input[name=nickname]").val(ret.data.nickname);
                //$('#phone').val(ret.data.phone);
                if(ret.data.sex!=0){
                  $("input[name=sex]").val(ret.data.sex);
                }

                if(ret.data.addr != null){
                    $("input[name=addr]").val(ret.data.addr);
                }
                $("input[name=addrid]").val(ret.data.addrid);

                if(ret.data.label!=null){
                    $("input[name=label]").val(ret.data.label);
                    $('.check_kinds').html(ret.data.labelstr)
                }
                if(ret.data.cardno!=''&&ret.data.cardno!=null&&ret.data.cardno!=undefined){
                    $("#cardno").html('已绑定');
                }
                if(pass=="1"){
                    $("input").attr("readonly","readonly");
                    $("select").attr("disabled","disabled");
                    $("input[name=work_year]").attr("disabled","disabled");
                    $("input[name=nickname]").removeAttr("readonly");
                    $("input[name=zfb]").removeAttr("readonly");
                    $("#cardno").removeAttr("onclick");
                }
                $("input[name=depart]").val(ret.data.depart);
                $("input[name=ipno]").val(ret.data.ipno);
                $("input[name=icno]").val(ret.data.icno);
                $("input[name=content]").val(ret.data.content);
                if(ret.data.work_year > 0){
                  $("input[name=work_year]").val(ret.data.work_year);
                }


            }else if(ret.code==501){
              alert(ret.msg)
              aaplay('login')
            }else {
              alert(ret.msg)
            }

            ajcate();
        });
    }

    function tijiao() {
        var nickname=$("input[name=nickname]").val();
        //var phone=$("input[name=phone]").val();
        var sex=$("input[name=sex]").val();
        var addr=$("input[name=addr]").val();
        var addrid=$("input[name=addrid]").val();
        var label=$("input[name=label]").val();
        var depart=$("input[name=depart]").val();
        var ipno=$("input[name=ipno]").val();
        var icno=$("input[name=icno]").val();
        var content=$("input[name=content]").val();
        var work_year = $("input[name=work_year]").val();

        var icon=$("input[name=icon]").val();
        var ipzm=$("input[name=n1]").val();
        var ipfm=$("input[name=n2]").val();
        var iczm=$("input[name=n3]").val();
        var icfm=$("input[name=n4]").val();
        var zfb = $("input[name=zfb]").val();
        $(".info_item p").removeClass("error");
        if(nickname==''){
            $("input[name=nickname]").prev().addClass("error");
            api.alert({msg:"请输入昵称！"});return;
        }else if(sex==''){
            $("input[name=sex]").prev().addClass("error");
            api.alert({msg:"请选择性别！"});return;
        }else if(addrid==0){
            $("#addressTit").addClass("error");
            api.alert({msg:"请选择地区！"});return;
        }else if(label==''){
            $("#zctit").addClass("error");
            api.alert({msg:"请选择专长类型！"});return;
        }else if(work_year==''){
            api.alert({msg:"请输入执业年限！"});return;
        }else if(isNaN(work_year)){
            api.alert({msg:"执业年限必须为数字！"});return;
        }else if(depart==''){
            $("input[name=depart]").prev().addClass("error");
            api.alert({msg:"请输入律所！"});return;
        }else if(ipno==''){
            $("input[name=ipno]").prev().addClass("error");
            api.alert({msg:"请输入执业证号码！"});return;
        }else if(!/^(\w{12})|(\w{17})$/.test(ipno)){
            $("input[name=nickname]").prev().addClass("error");
            alert("执业证号码为12位或17位！");return;
        }else if(icno==''){
            $("input[name=icno]").prev().addClass("error");
            api.alert({msg:"请输入身份证号码！"});return;
        }else if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(icno)){
            $("input[name=icno]").prev().addClass("error");
            api.alert({msg:"身份证号码格式错误！"});return;
        }else if(content==''){
            $("input[name=content]").prev().addClass("error");
            api.alert({msg:"请输入个人简介！"});return;
        }else if(ipzm==0 || ipfm==0 || iczm==0|| icfm==0){
            if(ipzm==0|| ipfm==0){
                $("#zjImgTit").addClass("error");
                api.alert({msg:"请上传执业证照片！"});return;
            }else{
                $("#idcardTit").addClass("error");
                api.alert({msg:"请上传身份证照片！"});return;
            }

        }

var p={token:token,infock:2,nickname:nickname,sex:sex,addr:addr,addrid:addrid,label:label,depart:depart,ipno:ipno,icno:icno,content:content,icon:icon,ipzm:ipzm,ipfm:ipfm,iczm:iczm,icfm:icfm,zfb:zfb,work_year:work_year};
        //alert(JSON.stringify(p));
        api.ajax({
            url: webSiteUrl+'/app/user/edit_user',
            method: 'post',
            data: {
                values:p
            }
        }, function(ret, err) {
            api.hideProgress();
            if(ret.code==200){

                alert(ret.msg);
                 api.execScript({
                      name:"personal",
                      script:"if(token!=''){user()}"
                    })
                api.openWin({
                    name: 'personal',
                    url: './personal.html',
                    reload:true,
                    pageParam: {

                    }
                });


            }else if(ret.code == 501){
              alert(ret.msg)
              aaplay('login_account','login_account.html');
            }else{

              alert(ret.msg)
            }
        });
    }

function ajcate(){
    api.ajax({
        url: webSiteUrl+'/app/public/ajcate',
        method: 'post',
        data: {

        }
    }, function(ret, err) {
        api.hideProgress();
        if(ret.code==200){

            f = "";
            s = "";
            var tj=ret.data;
            //alert(JSON.stringify(ret.data))

            if(tj != null){
                for(var i=0;i<tj.length;i++){
                    f+='<li style="cursor:pointer">'+tj[i].name+'</li>';

                    var son=tj[i].son
                    if(son != null){
                        s+='<ul>';
                        for(var j=0;j<son.length;j++){
                            s+='<li data="'+son[j].id+'" style="cursor:pointer">'+son[j].name+'</li>';
                        }
                        s+='</ul>';
                    }

                }
            }
            $('#f').html(f)
            $('#son').html(s)
        }else{
            alert(ret.msg);
        }
        ajcity()
    });

}
function ajcity(){
    api.ajax({
        url: webSiteUrl+'/app/public/region',
        method: 'post',
        data: {

        }
    }, function(ret, err) {
        api.hideProgress();
            if(ret.code==200){

                f = "";
                s = "";
                var tj=ret.data;


                if(tj != null){
                    for(var i=0;i<tj.length;i++){
                        if(i==0){
                            f+='<li class="active" style="cursor:pointer">'+tj[i].name+'</li>';
                        }else{
                            f+='<li style="cursor:pointer">'+tj[i].name+'</li>';
                        }

                        var son=tj[i].son
                        if(son != null){
                            s+='<li>';
                            for(var j=0;j<son.length;j++){
                                s+='<span style="cursor:pointer" data="'+son[j].id+'">'+son[j].name+'</span>';
                            }
                            s+='</li>';
                        }

                    }
                }
                $('#cityf').html(f)
                $('#citys').html(s)


            }else{
                alert(ret.msg);
            }
        });

    }
function logout(){
    $api.rmStorage('user');
    //$api.clearStorage ();

    api.openWin({
        name: 'login',
        url: './login.html',
        reload:true,
        pageParam: {

        }
    });
}

function showAction(num) {
    if(num != "icon"){
        if(pass==1){
            return;
        }
    }
     api.actionSheet({
         title: '上传图片',
         cancelTitle: '取消',
         buttons: ['拍照', '从手机相册选择']
     }, function(ret, err) {
         if (ret) {
             getPicture(ret.buttonIndex,num);
         }
     });
 }
function getPicture(sourceType,num) {
        if (sourceType == 1) { // 拍照
            //获取一张图片
            api.getPicture({
                sourceType: 'camera',
                encodingType: 'png',
                mediaValue: 'pic',
                allowEdit: false,
                quality: 90,
                saveToPhotoAlbum: true
            }, function(ret, err) {
                if(ret.data==''){return;}

                if (ret) {

                    var imgSrc = ret.data;
                    if (imgSrc != "") {

                        //$api.attr(ele, 'src', imgSrc);
                    }
                    if (ret.hasOwnProperty("list")) {

                        //var localAvaterPath = ret.data;
                        //$api.attr(ele, 'src', ret.list[0].path);
                        api.showProgress({
                            title: '正在上传...',
                            modal: true
                        });
                    }
                    var ele = $api.dom('#'+num);
                    api.ajax({
                        url: webSiteUrl+'/app/public/uploads',
                        method: 'post',
                        data: {
                            files: {
                                'file': ret.data,
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.code == 200) {
                                 //alert(JSON.stringify(ret));
                                api.hideProgress();

                                $api.attr(ele, 'src', webSiteUrl+ret.pic);

                                $("input[name="+num+"]").val(ret.id);

                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: ret.msg,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.hideProgress();
                            api.toast({
                                msg: err.msg,
                                location: 'middle'
                            });
                        }
                    });
                }
            });
        } else if (sourceType == 2) { // 从相机中选择
            //UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
            var obj = api.require('UIMediaScanner');
            obj.open({
                //返回的资源种类,picture（图片）,video（视频）,all（图片和视频）
                type: 'picture',
                //（可选项）图片显示的列数，须大于1
                column: 4,
                max: 1,
                //（可选项）图片排序方式,asc（旧->新）,desc（新->旧）
                sort: {
                    key: 'time',
                    order: 'desc'
                },
                //（可选项）模块各部分的文字内容
                texts: {
                    stateText: '已选择*项',
                    cancelText: '取消',
                    finishText: '完成'
                },
                styles: {
                    bg: '#fff',
                    mark: {
                        icon: '',
                        position: 'bottom_right',
                        size: 20
                    },
                    nav: {
                        bg: '#eee',
                        stateColor: '#000',
                        stateSize: 18,
                        cancleBg: 'rgba(0,0,0,0)',
                        cancelColor: '#000',
                        cancelSize: 18,
                        finishBg: 'rgba(0,0,0,0)',
                        finishColor: '#000',
                        finishSize: 18
                    }
                }
            }, function(ret) {
                if(ret.eventType=='cancel'){return;}
                if (ret) {
                    if (ret.hasOwnProperty("list")) {

                        //var localAvaterPath = ret.list[0].path;
                        //$api.attr(ele, 'src', ret.list[0].path);
                        api.showProgress({
                            title: '正在上传...',
                            modal: true
                        });
                    }
                    var ele = $api.dom('#'+num);
                    api.ajax({
                        url: webSiteUrl+'/app/public/uploads',
                        method: 'post',
                        data: {
                            files: {
                                'file': ret.list[0].path,
                            }
                        }
                    }, function(ret, err) {
                        if(ret.eventType=='cancel'){return;}
                        if (ret) {
                            if (ret.code == 200) {
                                //alert(JSON.stringify(ret));
                                api.hideProgress();

                                $api.attr(ele, 'src', webSiteUrl+ret.pic);

                                $("input[name="+num+"]").val(ret.id);




                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: ret.msg,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.hideProgress();
                            api.toast({
                                msg: err.msg,
                                location: 'middle'
                            });
                        }
                    });





                }
            });
        }
    }

    function changeicon(icon){
        var p={token:token,icon:icon};
        api.ajax({
            url: webSiteUrl+'/app/user/edit_user',
            method: 'post',
            data: {
                values:p
            }
        }, function(ret, err) {
            api.hideProgress();

            if(ret.code==200){
                alert(ret.msg)

            }else{alert(ret.msg)}
        });
    }


    $(".userInfo_list ul li select").change(function () {
        $(this).prev('input').val($(this).val());
    });

    //选择类型
    $(".check_kinds").click(function () {
        if(pass == "1"){
            return;
        }
        $(".fixed_checked").fadeIn().find('.checked_section').animate({
            'top': 0,
            'opacity': 1
        },400);
        $(".check_box ul li").eq(0).addClass('active').siblings('li').removeClass('active');
        $(".kinds_item ul").eq(0).show().siblings('ul').hide();
    });
    $('.fixed_checked').on('click','.check_box ul li',function(e){

        $(this).addClass('active').siblings('li').removeClass('active');
        $(".kinds_item ul").eq($(this).index()).show().siblings('ul').hide();
    })
    $('.fixed_checked').on('click','.kinds_item ul li',function(){

        if($(this).hasClass('active')){
            $(this).removeClass('active')
        }else {
            var l = $(".kinds_item ul > .active").length;
            if(l>=5){
                alert("专长类型最多选择5个");
            }else{
                $(this).addClass('active');
            }

        }
    });

    $(".kinds_choose").click(function () {
        if(pass == "1"){
            return;
        }
        $(".fixed").fadeIn().find('.content').animate({
            'top': '0',
            'opacity': 1
        });
        $(".choose ul li").eq(0).addClass('active').siblings('li').removeClass();
        $('.choose ol li').eq(0).show().siblings('li').hide();
    });

    $(document).on('click',".choose ul li",function () {
        $(this).addClass('active').siblings('li').removeClass();
        $('.choose ol li').eq($(this).index()).show().siblings('li').hide();
    });
    $(document).on('click',".choose ol li span",function () {
        var name=$(this).html()
        var pname=$('.choose ul li.active').html();

        $('input[name=addr]').val(pname+' '+name)
        var id=$(this).attr('data')
        $('input[name=addrid]').val(id)


        $(".fixed").fadeOut().find('.content').animate({
            'top': '-5rem',
            'opacity': 0
        })
    });

    $(".sure_btn").click(function () {
        var str='';
        var label='';
        var num=0;
        $(".kinds_item ul li").each(function () {

            if($(this).hasClass('active')){
                str = str+$(this).html()+' ';

                var id=$(this).attr('data')
                if(label==''){
                    label=id;
                }else{
                    label+=','+id;
                }
                num++
            }

        })
        if(label!=''){
            if(num>5){
                alert('最多选择5项专长');return;
            }
            $('input[name=label]').val(label);

        }
        if(str!=''){
            $(".check_kinds").html(str);
            $(".fixed_checked").fadeOut().find('.checked_section').animate({
                'top': '-4rem',
                'opacity': 0
            },400);
        }else{
            alert('请选择专长类型!')
        }

    })


</script>
</html>
